﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserHolder.ascx.cs"
    Inherits="WoodbaseVideoRental.UserControls.UserHolder" %>
<asp:ScriptManager EnablePartialRendering="true" ScriptMode="Auto" EnablePageMethods="true"
    ID="WVRClientScriptManager" runat="server" />
<script type="text/javascript">
    function Failed() {
        alert("An error occured!");
    }

    function SaveSuccessfull() {
        $("#newRentalList").remove();
        var cookieOptions = { expires: 7, path: '/' };
        $.cookie("currentuser", $("#selectedUserHolder").find(".placeholder").html(), cookieOptions);
        $("#btnSubmit").css("display", "none");
        $("#btnSubmit").parent().append("<div id='moviesRegistered'>Movies registered on user</div>");
    }

    $(document).ready(function () {
        $("#btnSubmit").bind("click", function () {
            var movieList = $("#newRentalList").html();

            var username = $("#currentusername").find("label").attr("id");
            PageMethods.SaveXml(username, movieList, SaveSuccessfull, Failed);
        });

        $("#removeBtn").bind("click", function () {
            var cookieOptions = { expires: -1, path: '/' };
            $.cookie("currentuser", "", cookieOptions);
            $("#selectedUserHolder").find(".placeholder").html("NO USER SELECTED");
            $("#btnSubmit").css("display", "none");
        });

        if ($.cookie("currentuser")) {
            $("#selectedUserHolder").find(".placeholder").html($.cookie("currentuser"));
            if ($("#selectedUserHolder").find("#newRentalList").html() != null) {
                $("#btnSubmit").css("display", "block");
            }
        }
        $("#selectedUserHolder").droppable({
            drop: function (event, ui) {
                if (ui.draggable.attr('class') == 'clienttable ui-draggable') {
                    ui.draggable.find(".rentedMoviesCount").attr("id", "currentMovieCount");
                    ui.draggable.find(".username").attr("id", "currentusername");
                    $(this).find(".placeholder").html("<table id='selectedUser'>" + ui.draggable.html() + "</table>");
                    $("#btnSubmit").css("display", "none");
                } else if ($(this).find("#selectedUser").html() != null) {
                    if ($(this).find("#selectedUser").find("#newRentalList").html() == null) {
                        $(this).find("#selectedUser").append("<ul id='newRentalList' style='display:none;'></ul>");
                    }
                    if ($("#newRentalList").html().indexOf(">" + ui.draggable.find("h2").html() + "<") == -1) {
                        $("#moviesRegistered").remove();
                        $(this).find("#newRentalList").append("<li class='newRental'>" + ui.draggable.find("h2").html() + "</li>");
                        $("#currentMovieCount").html(parseInt($("#currentMovieCount").html()) + 1);
                        $("#btnSubmit").css("display", "block");
                    } else {
                        alert(ui.draggable.find("h2").html() + " has already been added");
                    }
                }
                var cookieOptions = { expires: 7, path: '/' };
                $.cookie("currentuser", $(this).find(".placeholder").html(), cookieOptions);
            }
        });
    });
</script>
<h3>
    Current user</h3>
<div id="selectedUserHolder" class="clear">
    <div class="placeholder left">
        NO USER SELECTED</div>
    <div class="removeUser right">
        <img src="/Images/design/delete_x.png" id="removeBtn" alt="Remove user" /></div>
    <div class="clear">
        <input type="button" class="right" value="Checkout" style="display: none;" id="btnSubmit" />
    </div>
</div>
